import React, { useState, useEffect,useRef } from 'react';
import { connect } from 'react-redux'
import style from './style.module.css'
import { Breadcrumb, Space, Tabs, Button ,Modal,Form, Input,Switch,} from 'antd';
import ShopTable from '../../../components/ShopTable'
import ShopSearch from '../../../components/Shopsearch'


const { TabPane } = Tabs;

const GoodsManage = (props) => {
    const [status,setStatus]=useState('1')
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [detailInfo,setDetail]=useState({})
    const [childClassify,setClassify]=useState('')
    const [ keyword,setKeyweord]=useState('')
    const { sallingTotal, stokeTotal, salledTotal, recycleTotal, curList,levelList} = props
    const formRef=useRef()
    useEffect(() => {
        props.dispatch({ 
            type: 'get_shop',
            payload: {
                status
            }
        })
    }, [])
    useEffect(() => {
        props.dispatch({
            type: 'get_classify'
        })
    }, [])
    useEffect(()=>{
        if (formRef.current) {
            formRef.current.setFieldsValue(detailInfo);
        }
        console.log(formRef,"formRef")
    },[detailInfo])
    const SearchForm={
        LevelStatus:{
            title:'商品选择：',
            data:levelList
        },
        selectStatus:[], //单层选择
        search:{
            title:'商品搜索：',
            placeholder:'请输入商品名称、关键字'
        }
    }
    const handleInfo = () => {  //跳转添加商品信息
        props.history.push('/layout/addGoods')
    }
    const callback = (key) => {//导航切换
        // console.log(key);
        setStatus(key)
        props.dispatch({
            type: 'get_shop',
            payload: {
                status: key
            }
        })
    }
    const handleEdmit = (record) => {//编辑显示弹框
        console.log(record)
        setDetail({...record})

        setIsModalVisible(true);
        console.log(detailInfo,'detailInfo')
       
    }
    const handleCancel = () => {//关闭弹框
        setIsModalVisible(false);
      };
    const handleRecycle=(text, record)=>{//加入回收站
        // console.log(record)
        props.dispatch({
            type: 'add_recycle',
            payload: {
                status: 4,
                id:record.id
            }
        })
        props.dispatch({
            type: 'get_shop',
            payload: {
                status
            }
        })
    }
    const handleSearch=(val)=>{//搜索
        // console.log(val,'keyword')
        setKeyweord(val)
        props.dispatch({
            type: 'get_shop',  
            payload: {
                keyword: val,
                childClassify
            }
        })
    }
    const selectStatus=(val)=>{//选择
        console.log(val[val.length-1])
        setClassify(val[val.length-1])
        props.dispatch({
            type: 'get_shop',
            payload: {
                childClassify: val[val.length-1],
                keyword
            }
        })
    }
    const handleOk = () => {  //编辑确定
        setIsModalVisible(false);
        console.log(formRef.current.getFieldValue(),'formRef')
        props.dispatch({
            type: 'edmit_shop',
            payload:{...formRef.current.getFieldValue()}
        })
        props.dispatch({
            type: 'get_shop',
            payload: {
                status
            }
        })
    };
    const handleDelete=(record)=>{//删除
        console.log(record)
        const {id}=record;
        props.dispatch({
            type: 'delete_shop',
            payload:id
        })
        props.dispatch({
            type: 'get_shop',
            payload: {
                status
            }
        })
    }
    const handleRecover=(record)=>{//恢复
        props.dispatch({
            type: 'recover_shop',
            payload: {
                status: 1,
                id:record.id
            }
        })
        props.dispatch({
            type: 'get_shop',
            payload: {
                status
            }
        })
    }
    const handleDisabled=(record)=>{//修改商品上架状态
        console.log(record,'isdisabled')
        const {id,isDisabled}=record
        let newis=''
       if( record.isDisabled==='上架'){
        newis='下架'
        
       }else{
        newis='上架'
       }
       console.log(newis,'isdisabled')
       props.dispatch({
           type:'edmit_shop',
           payload:{
            isDisabled:newis,
            id:record.id
           }
       })

      }

    const columns = [
        {
          title: 'ID',
          dataIndex: 'id',
          key: 'id',
          align:'center'
        },
        {
          title: '商品图',
          width:90,
          dataIndex: 'coverPicture',
          key: 'coverPicture',
          align:'center',
          render:(coverPicture) => <img src={coverPicture} alt="" style={{width:'60px',height:'40px'}}/>,
        },
        {
          title: '商品名称',
          width:120,
          dataIndex: 'shopName',
          key: 'shopName',
          align:'center',
        },
        { 
          title: '售价',
          dataIndex: 'sellingprice',
          key: 'sellingprice',
          align:'center',
        },
        {
          title: '销量',
          dataIndex: 'sales',
          key: 'sales',
          align:'center',
        },
        {
          title: '库存',
          dataIndex: 'stock',
          key: 'stock',
          align:'center',
        },
        {
          title: '状态',
          dataIndex: 'isDisabled',
          key: 'isDisabled',
          align:'center',
          render:(isDisabled,record) => <Switch size='small' 
          checkedChildren={'上架'} 
          unCheckedChildren={'下架'} 
          defaultChecked ={isDisabled==='上架'}
          onChange={()=>handleDisabled(record)}
          />,
        },
        {
          title: '分类',
          dataIndex: 'childClassify',
          key: 'childClassify',
          align:'center',
        },
      ];
    const recycle = {
        title: '操作',
        key: 'opreat',
        align: 'center',
        width: 180,
        render: (text, record) => (
            <Space size="middle">
                <Button type="link" size='small' onClick={() => handleEdmit(text, record)}>编辑</Button>
                <Button type="link" size='small' onClick={() => handleRecover(record)}>恢复</Button>
                <Button type="link" size='small' onClick={() => handleDelete(text, record)}>删除</Button>
            </Space>
        ),
    }
    const salling = {
        title: '操作',
        key: 'opreat',
        align: 'center',
        width: 180,
        render: (text, record) => (
            <Space size="middle">
                <Button type="link" size='small' onClick={() => handleEdmit(text, record)}>编辑</Button>
                <Button type="link" size='small' onClick={() => handleRecycle(text, record)}>加入回收站</Button>
            </Space>
        ),
    }
    const sallingColums=[...columns,salling]
    const recycleColums=[...columns,recycle]
    // console.log(sallingColums,'colums')
   
    return (
        <div className={style.goodsManage}>
            {/* 面包屑导航 */}
            <div className={style.head}>
                <Breadcrumb separator=">">
                    <Breadcrumb.Item>
                        <i className='iconfont icon-gengduo-2'></i>
                        <a href="/layout">主页</a>
                    </Breadcrumb.Item>
                    <Breadcrumb.Item>
                        商品
                    </Breadcrumb.Item>
                    <Breadcrumb.Item>
                        商品管理
                    </Breadcrumb.Item>
                </Breadcrumb>
            </div>
            <div className={style.main}>
                <section>

                    <Tabs defaultActiveKey="1" 
                    onChange={callback} 
                     >
                        <TabPane style={{marginBottom:'0'}} tab={sallingTotal?'销售中商品' + '(' + sallingTotal + ')':'销售中商品(0)'} key="1">
                       <div className={style.opreate}>
                            {/* 搜索 */}
                        <ShopSearch 
                        SearchForm={SearchForm} 
                        selectStatus={selectStatus}
                        handleSearch={handleSearch}
                        />
                        {/* 添加 */}
                            <Button type="primary" onClick={handleInfo} size='small'>新增</Button>
                       </div>
                            <ShopTable curList={curList} columns={sallingColums}></ShopTable>
                        </TabPane>
                        <TabPane style={{marginBottom:'0'}} tab={stokeTotal?'仓库中商品' + '(' + stokeTotal + ')':'仓库中商品(0)' } key="2">
                        <div className={style.opreate}>
                            {/* 搜索 */}
                        <ShopSearch 
                        SearchForm={SearchForm} 
                        selectStatus={selectStatus}
                        handleSearch={handleSearch}
                        />
                        {/* 添加 */}
                            <Button type="primary" onClick={handleInfo} size='small'>新增</Button>
                       </div>
                            <ShopTable curList={curList}  columns={sallingColums}></ShopTable>
                        </TabPane>
                        <TabPane style={{marginBottom:'0'}} tab={salledTotal?'已销售商品' + '(' + salledTotal + ')':'已销售商品(0)'} key="3">
                        <div className={style.opreate}>
                            {/* 搜索 */}
                        <ShopSearch 
                        SearchForm={SearchForm} 
                        selectStatus={selectStatus}
                        handleSearch={handleSearch}
                        />
                        {/* 添加 */}
                            <Button type="primary" onClick={handleInfo} size='small'>新增</Button>
                       </div>
                            <ShopTable curList={curList}  columns={sallingColums}></ShopTable>
                        </TabPane>
                        <TabPane style={{marginBottom:'0'}} tab={recycleTotal?'回收站商品' + '(' + recycleTotal + ')':'回收站商品(0)'} key="4">
                        <div className={style.opreate}>
                            {/* 搜索 */}
                        <ShopSearch 
                        SearchForm={SearchForm} 
                        selectStatus={selectStatus}
                        handleSearch={handleSearch}
                        />
                        {/* 添加 */}
                            <Button type="primary" onClick={handleInfo} size='small'>新增</Button>
                       </div>
                            <ShopTable curList={curList} columns={recycleColums}></ShopTable>
                        </TabPane>
                    </Tabs>
                </section>
            </div>
            <Modal title="编辑" 
            visible={isModalVisible} 
            onOk={handleOk} 
            okText='确认'
            cancelText='取消'
            onCancel={handleCancel}>
               <Form
                    name="basic"
                    labelCol={{ span: 5 }}
                    wrapperCol={{ span: 14 }}
                    ref={formRef}
                    autoComplete="off"

                >
                    <Form.Item
                        label="商品名称"
                        name="shopName"
                        rules={[{ required: true, message: '商品名称不能为空' }]}
                    >
                        <Input  />
                    </Form.Item>
                    <Form.Item
                        label="售价"
                        name="sellingprice"
                        rules={[{ required: true, message: 'Please input your password!' }]}
                    >
                        <Input/>
                    </Form.Item>
                    <Form.Item
                        label="库存"
                        name="stock"
                        rules={[{ required: true, message: 'Please input your password!' }]}
                    >
                        <Input />
                    </Form.Item>

                </Form>
            </Modal>
        </div>
    );
}

export default connect((state) => {
    return {
        sallingTotal: state.sallingTotal, //1
        stokeTotal: state.stokeTotal,//2
        salledTotal: state.salledTotal,//3
        recycleTotal: state.recycleTotal,//4
        curList: state.curList,
        levelList:state.levelList
    }
})(GoodsManage);
